<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>卡通狗</title>
	<style>
		/* html元素样式 */
		:root {
			--hl:#1b2f90;
			--bg:#f9f9f6;
			--t:1.2s;
		}
		body {
			background: url('./images/bg.png') no-repeat center top;
			background-size: 100% auto;
		}
		.center {
			position: absolute;
			left: 50%;
			transform: translate(-50%,0);
			z-index: 1;
		}
		.dog {
			position: relative;
			width: 300px;
			height: 400px;
			top: 148px;
		}
		.forehead {
			width: 102px;
			height: 48px;
			background-color: var(--bg);
			border-radius: 51px / 40px 40px 8px 8px;
		}
		.face {
			width: 110px;
			height: 68px;
			background-color: var(--bg);
			border-radius: 50%;
			top: 20px;
		}
		.chin {
			width: 104px;
			height: 36px;
			background-color: var(--bg);
			top: 62px;
			border-radius: 52px / 0 0 36px 36px;
		}
		.ear {
			position: absolute;
			width: 16px;
			height: 70px;
			background-color: var(--hl);
			border-radius: 50%;
			left: 50%;
			top: 34px;
			transform-origin: 50% 0;
			transform: translate(-42px,0) rotate(10deg); 
			z-index: 0;
			animation:rotate var(--t) ease-out infinite;
		}
		.ear.right {
			transform: scale(-1,1) translate(-26px,0) rotate(10deg);
			animation:rotate-r var(--t) ease-out infinite;
		}
		.eye {
			position: absolute;
			width: 24px;
			height: 24px;
			background-color: var(--bg);
			border-radius: 12px / 13px 12px 12px 2px;
			left: 50%;
			top: 20px;
			transform-origin: 50% 0;
			transform: translate(-44px,0) rotate(10deg);
			z-index: 2;
			box-shadow: 1px 0 0 0 #000 inset,-1px 0 5px 1px #ddd; 
			overflow: hidden;
			
		}
		.eye.right {
			transform: scale(-1,1) translate(-19px,0) rotate(10deg);
			box-shadow:1px 0 0 0 #000 inset; 
		}
		.birthmark {
			position: absolute;
			width: 30px;
			height: 36px;
			background-color: var(--hl);
			border-radius: 15px /25px 28px 0px 13px;
			left: 50%;
			transform: translate(15px,0) rotate(-10deg);
			top: 10px;
			z-index: 1;
		}
		.pupil {
			position: absolute;
			width: 26px;
			height: 26px;
			background-color: #e79101;
			border-radius: 50%;
			left: 3px;
			top: 1px;
			box-shadow:  0 0 8px 0 #000 inset;
			animation:translate var(--t) ease-out infinite;
		}
		.pupil:before {
			content: "";
			position: absolute;
			width: 18px;
			height: 18px;
			background-color: #000;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.pupil:after {
			content: "";
			position: absolute;
			width: 5px;
			height: 5px;
			background-color: #fff;
			border-radius: 50%;
			left:3px;
			top:7px;
		}
		.nose {
			width: 62px;
			height: 32px;
			top: 45px;
			background-color: #363035;
			border-radius: 31px / 10px 10px 22px 22px;
			z-index: 3;
		}
		.nostril {
			position: absolute;
			width: 15px;
			height: 4px;
			top: 19px;
			left: 50%;
			background: linear-gradient(0deg,#363035 0%, #000 100%);
			border-radius: 50%;
			z-index: 1;
			transform: translate(-20px,0) rotate(30deg);
			animation:resize var(--t) ease-out infinite;
		}
		.nostril.right {
			transform:scale(-1,1) translate(-7px,0) rotate(30deg);
		}
		.nose:before {
			content: "";
			position: absolute;
			left: 50%;
			top: 1px;
			transform: translate(-50%,0);
			width: 60px;
			height: 10px;
			border-radius: 30px / 8px 8px 2px 2px;
			background: linear-gradient(30deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1a1b1 50%,#544d53 100%);
		}
		.mouth {
			width: 68px;
			height: 27px;
			background-color: #671316;
			border-radius: 34px / 0 0  27px 27px;
			z-index: 1;
			box-shadow: 0 0 4px 0 #000 inset;
			top: 68px;
			animation:open var(--t) ease-out infinite;
		}
		.mouth:before {
			position: absolute;
			left: 0;
			top: 0;
			content: "";
			width: 68px;
			height: 10px;
			background: var(--bg);
			border-radius: 34px / 0 0  5px 5px;
			z-index: 1;
		}
		.teen {
			position: absolute;
			left: 50%;
			top: 10px;
			transform: translate(-8px,0);
			width: 8px;
			height: 3px;
			background: var(--bg);
			border-radius: 4px / 0 0 0 1px;
			z-index: 1;
		}
		.teen.right {
			transform: scale(-1,1) translate(0,0);
			border-right: .5px solid #ddd;
		}
		.tongue {
			width: 34px;
			height: 14px;
			background: #a2504f;
			border-radius: 17px / 0 0  7px 7px;
			box-shadow: 0 0 4px  0 #111 inset;
			top: 8px;
			z-index: 0;
			animation:extend var(--t) ease-out infinite;
		}
		.body {
			width: 66px;
			height: 70px;
			background: var(--bg);
			top: 94px;
			border-radius: 50%;
			z-index: 0;
		}
		.arm {
			position: absolute;
			left: 50%;
			width: 26px;
			height: 40px;
			background: var(--bg);
			top:0;
			border-radius: 13px / 20px 10px 14px 20px;
			transform:translate(-44px,0) rotate(20deg);
		}
		.arm:before {
			position: absolute;
			right: 7px;
			top: 15px;
			content: "";
			width: 2px;
			height: 20px;
			border-radius: 5px / 10px 0 0 10px;
			box-shadow: -1px 0 0 0 rgba(200,200,200,.5);
			transform:rotate(-5deg);
		}
		.arm.right {
			transform: scale(-1,1) translate(-17px,0) rotate(20deg);
		}
		.leg {
			position: absolute;
			left: 50%;
			width: 29px;
			height: 50px;
			background: linear-gradient(-85deg,#ddd 0%,#ddd 5%,#fff 20%,#fff 100%);
			top: 40px;
			border-radius: 15px / 5px 5px 15px 45px;
			transform:translate(-32px,0);
		}
		.leg.right {
			transform: scale(-1,1) translate(-3px,0);
		}
		.foot {
			position: absolute;
			left: 2px;
			bottom: -8px;
			width: 29px;
			height: 15px;
			background: linear-gradient(-120deg,#ddd 0%,#ddd 15%,#fff 30%,#fff 100%);
			border-radius: 15px / 10px 10px 5px 5px;
		}
		.belly {
			z-index: 2;
			width: 60px;
			height: 36px;
			background: linear-gradient(0deg,#ddd 0%,#fff 20%,#fff 100%);
			border-radius: 30px / 0 0 36px 36px;
			top: 34px;
		}


		@keyframes rotate {
			0% {
				transform: translate(-42px,0) rotate(10deg);
			}
			50% {
				transform: translate(-42px,0) rotate(30deg);
			}
			100% {
				transform: translate(-42px,0) rotate(10deg);
			}
		}
		@keyframes rotate-r {
			0% {
				transform: scale(-1,1) translate(-26px,0) rotate(10deg);
			}
			50% {
				transform: scale(-1,1) translate(-26px,0) rotate(30deg);
			}
			100% {
				transform: scale(-1,1) translate(-26px,0) rotate(10deg);
			}
		}
		@keyframes translate {
			0% {
				left: 3px;
			}
			50% {
				left: 6px;
			}
			100% {
				left: 3px;s
			}
		}
		@keyframes resize {
			0% {
				height: 4px;
			}
			50% {
				height: 3px;
			}
			100% {
				height: 4px;
			}
		}
		@keyframes extend {
			0% {
				height: 14px;
			}
			50% {
				height: 20px;
			}
			100% {
				height: 14px;
			}
		}
		@keyframes open {
			0% {
				height: 27px;
				border-radius: 34px / 0 0  27px 27px;
			}
			50% {
				height: 20px;
				border-radius: 34px / 0 0  20px 20px;
			}
			100% {
				height: 27px;
				border-radius: 34px / 0 0  27px 27px;
			}
		}
	</style>
</head>
<body>
	<div class="dog center">
		<div class="forehead center"></div>
		<div class="face center"></div>
		<div class="chin center"></div>
		<div class="ear"></div>
		<div class="ear right"></div>
		<div class="birthmark"></div>
		<div class="eye">
			<div class="pupil"></div>
		</div>
		<div class="eye right">
			<div class="pupil"></div>
		</div>
		<div class="nose center">
			<div class="nostril"></div>
			<div class="nostril right"></div>
		</div>
		<div class="mouth center">
			<div class="teen"></div>
			<div class="teen right"></div>
			<div class="tongue center"></div>
		</div>
		<div class="body center">
			<div class="arm"></div>
			<div class="arm right"></div>
			<div class="leg">
				<div class="foot"></div>
			</div>
			<div class="leg right">
				<div class="foot"></div>
			</div>
			<div class="belly center"></div>
		</div>

	</div>
</body>
</html>